import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {


  search = () => {
    this.props.updateAppState({isFirst:false,isLoading:true})
    //连续的结构赋值 +重命名 
    const {keyWordElement:{value:keyword}}=this
    // 发送网络请求 
    axios.get(`http://localhost:3000/api1/search/users?q=${keyword}`).then(
      response=>{
        this.props.updateAppState({isLoading:false,users:response.data.items})
        console.log('成功了',response.data)
      },
      error=>{
        console.log('失败了',error)
        this.props.updateAppState({isLoading:false,err:error.message})
      }
    )

    
  }
  render() {
    return (
        <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
            <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
            <button onClick={this.search}>搜索</button>
        </div>
    </section>
    )
  }
}
